<template>
  <div class="goodsCargoVideo">
    <choice @formatwdate="formatwdate" @formatwdate1="formatwdate1" show="week" :timing="8">
      <template>
        <radio_group
          :radio_values="goodslist"
          v-model="source_01"
          :title="title1"
          :tit="source_01"
        />
      </template>
    </choice>
    <div class="list_public">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01">拼命加载中...</van-loading>
      <van-list
        v-if="table_data02.length"
        v-model="loading"
        :finished="finished"
        :finished-text="permissions || (!loading_01 && isQzss) ? '' : '我是有底线的～'"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="lp_box" v-for="(item, i) in table_data02" :key="'table' + i">
          <i class="rank_num" v-if="i <= 8">{{i+1}}</i>
          <i class="ordinary_num" v-else>{{i+1}}</i>
          <div class="lp_header">
            <div class="lp_cover_box head_video">
              <div class="lp_cover" @click="goPage(item.url)">
                <img :src="item.thumPic" v-errorImg:video v-if="item.thumPic" />
                <img :src="errorImg" v-else>
              </div>
            </div>
            <div class="lp_title">
              <div class="lp_title_item" @click="govideodetails(item.awemeId)">
                <span>{{ item.title }}</span>
              </div>
              <div class="lp_user" @click="$router.push('/talentdetails?id='+item.authorId)">
                <div class="lp_item_head"><img v-lazy="item.logo" v-errorImg:talent /></div>
                <p>{{ item.nickName }}</p>
              </div>
            </div>
          </div>
          <div class="lp_footer" @click="govideodetails(item.awemeId)">
            <div class="lpf_item"><strong>{{ format_num(item.favoriteCount) }}</strong><span>视频点赞量</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.volume) }}</strong><span>视频销量</span></div>
          </div>
        </div>
        <p v-if="!loading_01 && isQzss && !permissions" class="nothingWl">我是有底线的~</p>
        <noPower v-if="permissions" :icon="false" :isRank="true" />
      </van-list>
      <div class="bottom_Collection" v-if="!table_data02.length && !loading_01">
        <img src="@/assets/three/noData.png" alt />
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import radio_group from '@/component/screen1';
import search from '@/component/search';
import choice from '@/component/choice_2';
// import choice1 from '@/component/choice_1';
// import choice3 from '@/component/choice3';
import SourceIcon from '@/component/SourceIcon'; //图片
import errorImg from '@/assets/img/video.png'; //图片

// import VConsole from 'vconsole';

// let vConsole = new VConsole();
export default {
  name: '',
  components: {
    choice,
    radio_group,
    SourceIcon,
    // choice1,
    // choice3,
    search
  },
  props: ['valueSerach'],
  data() {
    return {
      a: true,
      valSerach: '',
      loading_01: false,
      permissions: false, //权限
      tit1: '筛选',
      tit2: '全部',
      title1: '商品类目',
      source: '全部',
      source_01: '全部',
      goodsKind: '全部',
      goodslist: [], //全部商品
      goodslist1: [],
      CategoryId: 0, // "商品id"
      CategoryId_01: 0, // "商品id"
      DateType: 1, //判断日月周榜单
      RankType: 1, //榜单类型：1-品类飙升榜 2-行业飙升榜
      Time: '', //时间
      keyword: '',
      page: 1,
      Age: '不限',
      Gender: '不限',
      //  ss
      sourceList: ['全部', '京东', '淘宝', '小店', '天猫', '苏宁', '考拉'],
      title: '日榜',
      value: '',
      ProFrom: -1, //商品来源 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      page: 1,
      count: '',
      table_data02: [],
      dataList: [],
      //触底
      loading: false,
      finished: false,
      refreshing: false,
      pageSize: 30,
      isQzss: false,
      errorImg: errorImg
    };
  },
  computed: {
    // 显示头像默认图片
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    }
  },
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.searchKey('');
      }
    }
  },

  created() {
    if (window.pageYOffset != 0) {
      window.pageYOffset = 10;
    }
    this.finished = false;
    this.valSerach = '';
    this.keyword = '';
    this.permissions = false;
    this.page = 1;
    this.CategoryId = 0;
    this.RankType = 1;
    this.table_data02 = [];
    this.$watch('source', function (newValue, oldValue) {
      this.page = 1;
      this.table_data02 = [];
      this.dataList = [];
      this.CategoryId = 0;
      // this.ProFrom = -1;
      let CategoryId = this.goodslist1.filter(item => {
        if (item.categoryName == newValue) {
          let id = item.id;
          return id;
        }
      });
      this.CategoryId = CategoryId[0].id;
      this.PostRankList();
    });
    this.$watch('source_01', function (newValue, oldValue) {
      this.page = 1;
      this.table_data02 = [];
      this.CategoryId = 0;
      this.ProFrom = -1;
      let CategoryId = this.goodslist1.filter(item => {
        if (item.categoryName == newValue) {
          let id = item.id;
          return id;
        }
      });
      this.CategoryId_01 = CategoryId[0].id;
      this.PostRankList();
    });
  },
  mounted() {
    this.getProCategories();
    //  window.addEventListener('scroll', this.scrollToTop)
  },

  methods: {
    goPage(url){
      location.href = url;
    },
    defaultImgFn(item) {
      item.thumPic = '';
    },
    searchKey(key) {
      this.valSerach = key;
      this.page = 1;
      this.finished = false;
      (this.permissions = false), (this.table_data02 = []);
      this.PostRankList();
    },
    toSearch() {
      this.$router.push({
        path: '/searchHistory',
        query: { value: 1, name: this.valSerach }
      });
    },
    returnBack(a) {
      this.page = 1;
      this.keyword = a;
      this.table_data02 = [];
      this.PostRankList();
    },
    returnBack1(a) {
      this.keyword = a;
    },
    douyin(i) {
      location.href = i;
    },
    //跳转达人详情
    taldatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id: id } });
    },
    //跳转视频详情
    govideodetails(id) {
      this.$router.push({ path: '/videodetailsMain', query: { id: id } });
    },
    // //子组件传来的周月日榜
    // formatwdate(i, time) {
    //   this.page = 1;
    //   this.table_data02 = [];
    //   if (i == '日榜') {
    //     this.getday();
    //     this.RankType = 1;
    //   } else if (i == '周榜') {
    //     this.deltime(time);
    //     this.RankType = 2;
    //   } else if (i == '月榜') {
    //     this.month();
    //     this.RankType = 3;
    //   }

    //   this.PostRankList();
    // },
    // formatwdate1(i, time) {
    //   this.page = 1;
    //   this.table_data02 = [];
    //   this.dataList = [];
    //   if (this.RankType == 3) {
    //     this.Time = time;
    //     this.PostRankList();
    //   } else if (this.RankType == 2) {
    //     this.deltime(i);
    //   } else {
    //     this.Time = this.year() + '-' + i;
    //   }
    //   this.PostRankList();
    // },
     //子组件传来的周月日榜
    formatwdate(i, dateObj) {
      this.page = 1;
      this.table_data02 = [];
      this.dataList = [];
      if (i == '日榜') {
        this.DateType = 1;
        this.Time = dateObj.value;
      } else if (i == '周榜') {
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
        this.DateType = 2;
      } else if (i == '月榜') {
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
        this.DateType = 3;
      }
      this.PostRankList();
    },
    formatwdate1(dateObj) {
      this.page = 1;
      this.table_data02 = [];
      this.dataList = [];
      if(this.DateType == 1){ //日榜传一个值，周榜月榜传区间日期
        this.Time = dateObj.value;
      }else{
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
      }
      this.PostRankList();
    },
    // 商品类目接口
    getProCategories() {
      return this.$axios({
        method: 'get',
        url: '/api/product/GetProCategoriesNew'
      })
        .then(res => {
          //   全部中的商品名称
          this.goodslist1 = res.data.data;
          this.goodslist = this.goodslist1.map(item => {
            return item.categoryName;
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    //或去年
    year() {
      var today = new Date();
      var tYear = today.getFullYear();
      return tYear;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    //去掉月日
    deltime(time) {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var a = time.replace(/日/g, '-');
      var str = a.replace(/月/g, '-');
      var str1 = str.replace(/--/g, '-' + y + '-');
      var str1 = str1.substring(0, str1.length - 1);
      this.Time = y + '-' + str1;
    },
    //获取抖音带货视频数据
    PostRankList() {
      this.loading = true;
      this.loading_01 = true;
      this.permissions = false;
      this.finished = false;
      this.isQzss = Boolean(this.valSerach);
      this.$axios
        .post('/api/product/PostRankList', {
          RankType: this.RankType,
          CategoryId: this.CategoryId_01,
          DateType: this.DateType,
          Time: this.Time,
          Keyword: this.valSerach ? this.valSerach : '',
          Index: this.page,
          Size: this.pageSize,
          categoryIds:[]
        })
        .then(res => {
          this.loading_01 = false;
          this.loading = false;
          if (res.data.code == 0) {
            this.table_data02 = this.table_data02.concat(res.data.data.ranks);
            // console.log(this.table_data02);
            this.refreshing = false;
            this.finished = false;

            if (res.data.data.ranks.length && res.data.data.ranks.length < this.pageSize) {
              this.finished = true;
            }
          } 
          if (res.data.code == 1003 || res.data.code1 == 1013) { //code1:1013个数权限不够 - code1专门给前端用
            this.permissions = true;
            this.finished = true;
          }
        })
        .catch(err => {
          this.loading = false;
          this.loading_01 = false;
          console.log(err);
        });
    },
    month() {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth();
      var d = nowdate.getDate();
      var lastDay = new Date(y, m, 0);
      if (m < 10) {
        m = '0' + m;
      }
      if (d < 10) {
        d = '0' + d;
      }
      var newvalue = y + '-' + m + '-' + '01' + '-' + y + '-' + m + '-' + lastDay.getDate();
      this.Time = newvalue;
    },
    //触底
    onLoad() {
      if (this.page * this.pageSize > this.table_data02.length) {
        this.loading = false;
        this.finished = true;
      } else if (this.table_data02.length) {
        this.loading = true;
        this.page = this.page + 1;
        this.PostRankList();
        // this.getData();
      }
    },
    onRefresh() {
      // 清空列表数据
      //   this.finished = false;
      this.loading = false;
      this.page = 1;
      this.table_data02 = [];
      this.dataList = [];
      // 重新加载数据
      this.PostRankList();
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/common/list_public.styl';
//@import url();
.goodsCargoVideo {
  .nothingWl {
    font-size: 0.346667rem;
    color: #888;
    padding-bottom: 1.6rem;
    span {
      color: #fd7f2c;
    }
  }
  a {
    text-decoration: none;
  }

  #commerce {
    background: #f1f1f1;
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.58rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: -0.183333rem;
      left: 0.093333rem;
      font-size: 0.373333rem;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      font-family: DINPro-Medium;
      color: #666666;
      z-index: 1;
    }
    a {
      text-decoration: none;
    }
    .box {
      width: 9.2rem;
      margin: 0 auto;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 0.2rem;
      padding-bottom: 0.2rem;
      .topbox {
        display: flex;
      }
      // 图片
      .boxleft {
        margin-top: 0.266667rem;
        width: 1.86666rem;
        position: relative;
        .rank {
          position: absolute;
          top: -0.2rem;
          left: 0.1rem;
          z-index: 1;
          width: 0.62rem;
          height: 0.52rem;
          background: url(../../assets/two/fire.png) no-repeat center;
          background-size: 100% 100% !important;
          box-sizing: 100%;
          p {
            font-family: DINPro-Medium;
            font-size: 0.373333rem;
            color: #666666;
            text-align: center;
            line-height: 0.56rem;
          }
        }
        .cover_box {
          position: relative;
          width: 1.333333rem;
          height: 1.333333rem;
          display: block;
          margin: 0rem 0.266rem 0 0.266667rem;
          border-radius: 0.266667rem;
          overflow: hidden;
          .play {
            display: block;
            width: 0.613rem;
            height: 0.613rem;
            position: absolute;
            top: 38%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
          }
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }
      // 介绍
      .boxright {
        width: 6.53rem;
        margin-top: 0.266667rem;
        .tit {
          padding-top: 0.086667rem;
          width: 7rem;
          height: 0.373rem;
          line-height: 0.373rem;
          font-size: 0.4rem;
          color: #222;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // 价格+佣金率
        .price1 {
          display: flex;
          margin-top: 0.1rem;
          .prpr1 {
            display: block;
            width: 0.613rem;
            height: 0.613rem;
            border-radius: 50%;
          }
          div {
            font-size: 0.373333rem;
            line-height: 0.66rem;
            color: #666666;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            // -webkit-line-clamp: 2;
            -webkit-line-clamp: 1;
          }
        }
      }
    }
    // 数量
    .num {
      padding-top: 0.4rem;
      display: flex;
      justify-content: space-around;
      .one p,
      .two p {
        font-size: 0.373333rem;
        color: #222;
        font-family: Dinpro-medium;
        text-align: center;
        line-height: 0.266rem;
      }
      .one span,
      .two span {
        display: block;
        font-size: 0.293333rem;
        line-height: 0.613rem;
        text-align: center;
        padding-bottom: 0.1067rem;
      }
    }
  }
  .bot1 {
    display: flex;
    width: 9.2rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f4f9ff;
    border-radius: 0.44rem;
    border: solid 0.02rem #1779ff;
    margin: 0 auto;
    margin-bottom: 1.506667rem;

    p {
      margin-left: 0.6rem;
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #222222;
    }
    a {
      font-size: 0.346667rem;
      color: #1779ff;
      text-decoration: none;
    }
  }
  .bottom_Collection {
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.346667rem;
      line-height: 0.4rem;
      color: #888888;
    }
    span {
      color: #fd7f2c;
    }
  }
  .one_1 {
    span {
      font-size: 0.293333rem;
      color: #888888;
    }
  }
  .choice {
    width: 5.333333rem;
  }

  .color {
    color: #888;
  }
  .choice01 {
    width: 7.5rem !important;
  }
}
</style>
